<template>
  <el-row class="RangeDrawer">
    <commonDrawer
      :title="drawerType === 'add' ? '创建客服账号' : '编辑客服账号'"
      :drawer="drawer"
      :size="'600px'"
      :isShowMoreBtn="true"
      @closeDraw="closeDraw"
      @cancelFun="closeDraw"
      @save="save"
    >
      <template slot="column">
        <div class="range-area" v-loading="loading">
         <el-form class="m7-form accessForm" :rules="rules"
            size="mini" :model="accessForm"
            ref="accessForm" label-position="top">
            <el-form-item label="头像" prop="avatar">
              <span slot="label"><span style="color: #F56C6C;margin-right:4px">*</span>头像</span>
              <upload-image ref="uploadImage"></upload-image>
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model.trim="accessForm.name" size="mini" placeholder="请填写名称"></el-input>
            </el-form-item>
            <el-form-item v-if="drawerType === 'edit'">
                <span slot="label">客服链接
                  <el-tooltip content="新建客服账号时，保存后才可查看链接和二维码" placement="top">
                    <i style="font-size: 12px; color: #B3B9C7; padding-right :6px" class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></i>
                  </el-tooltip>
                </span>
                <disabled-text :text="accessForm.kfURL"></disabled-text>
            </el-form-item>
            <el-form-item style="position: relative" v-if="drawerType === 'edit'">
                <div slot="label">客服链接二维码
                  <el-button type="text" class="rightButton"><div style="font-size: 12px" @click="downFun">下载</div></el-button>
                </div>
                <vue-qr ref="Qrcode" :text="accessForm.kfURL" :margin="0" :size="70"></vue-qr>
            </el-form-item>
            <el-form-item label="会话流程" prop="processId">
                <span slot="label">会话流程
                  <el-tooltip content="可以指定专属会话流程，不设置将使用企业通用会话流程" placement="top">
                    <i style="font-size: 12px; color: #B3B9C7; padding-right :6px" class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></i>
                  </el-tooltip>
                </span>
              <m7Select filterable
              v-model="accessForm.processId"
              clearable
              size="mini" :options="processData"
              :defaultProps="{value: '_id', label: 'name'}"
              placeholder="请选择">
              </m7Select>
            </el-form-item>
            <el-form-item label="满意度评价" prop="isSatisfaction">
              <el-switch
                v-model="accessForm.isSatisfaction"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
            <el-form-item prop="openAssistance">
              <span slot="label">
                启用智能辅助
              </span>
              <el-switch
                v-model="accessForm.isEnableRobotAssist"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </commonDrawer>
  </el-row>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator';
import commonDrawer from '@/common/views/drawer/index.vue';
import { commonAction, deepClone } from '@/utils/common';
import DisabledText from './DisabledText.vue'
import UploadImage from './UploadImage.vue'
import vueQr from 'vue-qr'
@Component({
  name: 'EditService',
  components: {
    commonDrawer,
    DisabledText,
    UploadImage,
    vueQr
  }
})
export default class EditService extends Vue {
  [x: string]: any
  @Ref() private readonly tree: any
  @Ref() private readonly uploadImage: any
  private drawer: boolean = false
  private drawerType: string = 'add'
  private data: any
  private loading: boolean = false
  public accessForm: any = {}

  get processData () {
    return this.$store.state.common.publicCache.processList || []
  }

  private rules = {
    name: [{ required: true, trigger: 'blur', message: '请填写名称' }]
  }

  private async openDraw (data: any, type: string) {
    this.drawer = true;
    this.$nextTick(() => {
      this.drawerType = type
      this.accessForm = deepClone(data)
      this.uploadImage.createUpload(this.accessForm.avatar)
    })
  }

  private closeDraw () {
    (this as any).$refs.accessForm.clearValidate();
    this.drawer = false;
  }

  private downFun () {
    const qrcode: any = this.$refs.Qrcode
    const iconUrl = qrcode.$el.src
    const a = document.createElement('a')
    a.download = '二维码'
    a.href = iconUrl
    a.click()
  }

  private save () {
    if (!this.uploadImage.attachsObj) {
      this.$message.error('请上传头像')
      return
    }
    (this as any).$refs.accessForm.validate(async (valid) => {
      if (valid) {
        const data: any = {
          corpId: this.accessForm.corpId,
          avator: this.uploadImage.attachsObj,
          name: this.accessForm.name,
          processId: this.accessForm.processId,
          isSatisfaction: this.accessForm.isSatisfaction,
          satisfactionId: this.accessForm.satisfactionId,
          isEnableRobotAssist: this.accessForm.isEnableRobotAssist
        }
        let url = '/im-wechat/action/config/wxkfAuthMode/addChannel'
        if (this.drawerType === 'edit') {
          url = '/im-wechat/action/config/wxkfAuthMode/updateChannel'
          data._id = this.accessForm._id
        }
        const params = { url, method: 'POST', data: { ...data, avatar: this.uploadImage.attachsObj } }
        try {
          this.loading = true
          const result: any = await commonAction(params)
          if (result.success) {
            this.$message.success('保存成功')
            this.loading = false
            this.closeDraw()
            this.$emit('getData')
          }
        } catch (e) {
          this.loading = false
        }
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
.RangeDrawer
  .range-area
    .rightButton
      position: absolute
      top 0px
      right 0px
      padding-top 0px
      height: 12px
 .tip-span
    font-size 12px
    color #B3B9C7
    cursor pointer
</style>
